<template>
	<view class="content">
		<view class="topLook">
			<view class="topLookson">
				<!-- 传 1  是用 #000000 样式   传 0 是用 active-color 样式颜色 -->
				<u-tabs inactive-color="#6e6e6e" :list="list" :is-scroll="false" active-color="#ff2500"
					:number-color="1" :current="current" @change="changeIndex"></u-tabs>
			</view>
		</view>
		<view class="botList">
			<view class="botList_son" @click="gotoDetile">
				<view class="botList_son_son">
					<image src="../../static/images/dd2.jpg" class="botList_son_son_img" mode=""></image>
					<view class="botList_son_son_title u-line-2">
						大家在有了车的时候相比没有车的时候生活有什么大变化呢1111111111111111
					</view>
					<view class="botList_name">
						<view class="botList_name_left">
							<image src="../../static/images/dd2.jpg" class="botList_left_img" mode=""></image>
							<view class="botList_son_center">
								<view class="botList_son_centertop">
									卡罗拉2017款
								</view>
								<view class="botList_son_centerbot">
									<image src="../../static/images/copyVip.png" class="botList_son_centerbot_img" mode="">
									</image>
									<view class="botList_son_centerbot_text">
										认证车主
									</view>
								</view>
							</view>
						</view>
						<view class="botList_right">
							<u-icon name="map" size="30"></u-icon>590m
						</view>
					</view>
				</view>
			</view>
			<view class="botList_son" @click="gotoDetile">
				<view class="botList_son_son">
					<image src="../../static/images/dd2.jpg" class="botList_son_son_img" mode=""></image>
					<view class="botList_son_son_title u-line-2">
						大家在有了车的时候相比没有车的时候生活有什么大变化呢1111111111111111
					</view>
					<view class="botList_name">
						<view class="botList_name_left">
							<image src="../../static/images/dd2.jpg" class="botList_left_img" mode=""></image>
							<view class="botList_son_center">
								<view class="botList_son_centertop">
									卡罗拉2017款
								</view>
								<view class="botList_son_centerbot">
									<image src="../../static/images/copyVip.png" class="botList_son_centerbot_img" mode="">
									</image>
									<view class="botList_son_centerbot_text">
										认证车主
									</view>
								</view>
							</view>
						</view>
						<view class="botList_right">
							<u-icon name="map" size="30"></u-icon>590m
						</view>
					</view>
				</view>
			</view>
			<view class="botList_son" @click="gotoDetile">
				<view class="botList_son_son">
					<image src="../../static/images/dd2.jpg" class="botList_son_son_img" mode=""></image>
					<view class="botList_son_son_title u-line-2">
						大家在有了车的时候相比没有车的时候生活有什么大变化呢1111111111111111
					</view>
					<view class="botList_name">
						<view class="botList_name_left">
							<image src="../../static/images/dd2.jpg" class="botList_left_img" mode=""></image>
							<view class="botList_son_center">
								<view class="botList_son_centertop">
									卡罗拉2017款
								</view>
								<view class="botList_son_centerbot">
									<image src="../../static/images/copyVip.png" class="botList_son_centerbot_img" mode="">
									</image>
									<view class="botList_son_centerbot_text">
										认证车主
									</view>
								</view>
							</view>
						</view>
						<view class="botList_right">
							<u-icon name="map" size="30"></u-icon>590m
						</view>
					</view>
				</view>
			</view>
			<view class="botList_son" @click="gotoDetile">
				<view class="botList_son_son">
					<image src="../../static/images/dd2.jpg" class="botList_son_son_img" mode=""></image>
					<view class="botList_son_son_title u-line-2">
						大家在有了车的时候相比没有车的时候生活有什么大变化呢1111111111111111
					</view>
					<view class="botList_name">
						<view class="botList_name_left">
							<image src="../../static/images/dd2.jpg" class="botList_left_img" mode=""></image>
							<view class="botList_son_center">
								<view class="botList_son_centertop">
									卡罗拉2017款
								</view>
								<view class="botList_son_centerbot">
									<image src="../../static/images/copyVip.png" class="botList_son_centerbot_img" mode="">
									</image>
									<view class="botList_son_centerbot_text">
										认证车主
									</view>
								</view>
							</view>
						</view>
						<view class="botList_right">
							<u-icon name="map" size="30"></u-icon>590m
						</view>
					</view>
				</view>
			</view>
			<view class="botList_son" @click="gotoDetile">
				<view class="botList_son_son">
					<image src="../../static/images/dd2.jpg" class="botList_son_son_img" mode=""></image>
					<view class="botList_son_son_title u-line-2">
						大家在有了车的时候相比没有车的时候生活有什么大变化呢1111111111111111
					</view>
					<view class="botList_name">
						<view class="botList_name_left">
							<image src="../../static/images/dd2.jpg" class="botList_left_img" mode=""></image>
							<view class="botList_son_center">
								<view class="botList_son_centertop">
									卡罗拉2017款
								</view>
								<view class="botList_son_centerbot">
									<image src="../../static/images/copyVip.png" class="botList_son_centerbot_img" mode="">
									</image>
									<view class="botList_son_centerbot_text">
										认证车主
									</view>
								</view>
							</view>
						</view>
						<view class="botList_right">
							<u-icon name="map" size="30"></u-icon>590m
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '关注'
				}, {
					name: '发现'
				}],
				current: 0
			}
		},
		onLoad() {},
		methods: {
			changeIndex(e) {
				console.log(e)
				this.current = e
			},
			gotoDetile() {
				uni.navigateTo({
					url: "../../pageList/pages/detailList/detailList"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 140rpx;

		.topLook {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-end;
			width: 100%;
			height: 140rpx;
			background-color: #FFFFFF;

			.topLookson {
				width: 50%;

				/deep/ .u-tab-item {
					font-weight: 700;
					// color: #000000 !important;
					font-size: 29rpx !important;
				}
			}

		}

		.botList {
			display: flex;
			box-sizing: border-box;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			padding: 10rpx;
			background-color: #fafafa;
			width: 100%;

			.botList_son {
				height: 640rpx;
				width: 50%;
				padding: 10rpx;

				.botList_son_son {
					width: 100%;
					height: 100%;
					background-color: #FFFFFF;
					border-radius: 15rpx;
					overflow: hidden;

					.botList_son_son_img {
						height: 465rpx;
						width: 100%;
					}

					.botList_son_son_title {
						font-size: 24rpx;
						height: 70rpx;
						padding: 0 15rpx;
						color: #1c1c1c;
						// display: -webkit-box;
						// -webkit-box-orient: vertical;
						// -webkit-line-clamp: 2;
						// overflow: hidden;
						// margin-bottom: 10rpx;
					}

					.botList_name {
						height: 60rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 100%;
						padding: 0 15rpx;

						.botList_name_left {
							width: 220rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.botList_left_img {
								width: 60rpx;
								height: 60rpx;
								border-radius: 10rpx;
							}

							.botList_son_center {
								width: 140rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-around;

								.botList_son_centertop {
									font-size: 24rpx;
									color: #616161;
									width: 140rpx;
									margin-bottom: 5rpx;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								.botList_son_centerbot {
									display: flex;
									align-items: center;

									.botList_son_centerbot_img {
										width: 24rpx;
										height: 24rpx;
										margin-right: 6rpx;
									}

									.botList_son_centerbot_text {
										font-size: 21rpx;
										color: #676767;
									}
								}
							}
						}

						.botList_right {
							font-size: 24rpx;
							color: #959595;
						}
					}
				}
			}
		}
	}
</style>
